<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:j="http://tags"
                xmlns:p="http://primefaces.org/ui"
                template="/facelets/templateMenu.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="head">
        <title>e-Home - Grupos de Usuários</title>
    </ui:define>

    <ui:define name="body">
        <h:form id="frmUsuarioGrupo">
            <p:remoteCommand id="cmdNovoUsuarioGrupo"
                             name="novoUsuarioGrupo"
                             actionListener="#{usuarioGrupoController.novo()}"
                             update="pnlUsuarioGrupoTitulo, pnlUsuarioGrupoDados, pnlUsuarioGrupoPermissoes"
                             oncomplete="$('#modal-usuarioGrupo').modal('show'); return false;"/>

            <p:remoteCommand id="cmdAlterarUsuarioGrupo"
                             name="alterarUsuarioGrupo"
                             update="pnlUsuarioGrupoTitulo, pnlUsuarioGrupoDados, pnlUsuarioGrupoPermissoes"
                             actionListener="#{usuarioGrupoController.alterar()}"
                             oncomplete="$('#modal-usuarioGrupo').modal('show'); return false;"/>

            <p:remoteCommand id="cmdExcluirUsuarioGrupo"
                             name="excluirUsuarioGrupo"
                             update="lblUsuarioGrupoExcluir"
                             actionListener="#{usuarioGrupoController.excluir()}"
                             oncomplete="$('#modal-usuarioGrupo-excluir').modal('show'); return false;"/>

            <p:remoteCommand id="cmdConfirmarExclusaoUsuarioGrupo"
                             name="confirmarExclusaoUsuarioGrupo"
                             update="dtbUsuarioGrupo"
                             actionListener="#{usuarioGrupoController.confirmarExclusao()}"
                             oncomplete="$('#modal-usuarioGrupo-excluir').modal('hide'); return false;"/>

            <p:remoteCommand id="cmdCancelarExclusaoUsuarioGrupo"
                             name="cancelarExclusaoUsuarioGrupo"
                             onstart="$('#modal-usuarioGrupo-excluir').modal('hide'); return false;"/>

            <p:remoteCommand id="cmdSalvarUsuarioGrupo"
                             name="salvarUsuarioGrupo"
                             update="dtbUsuarioGrupo"
                             actionListener="#{usuarioGrupoController.salvar()}"
                             oncomplete="$('#modal-usuarioGrupo').modal('hide'); return false;"/>

            <p:remoteCommand id="cmdCancelarUsuarioGrupo"
                             name="cancelarUsuarioGrupo"
                             onstart="$('#modal-usuarioGrupo').modal('hide'); return false;"/>

            <div id="modal-usuarioGrupo" class="modal hide fade">
                <div class="modal-header">
                    <p:outputPanel id="pnlUsuarioGrupoTitulo">
                        <h:panelGrid columns="2" cellpadding="5">
                            <p:graphicImage value="/resources/img/#{(usuarioGrupoController.operacao == consUtilController.operacaoNOVO) ? 'userAdd' : (usuarioGrupoController.operacao == consUtilController.operacaoALTERAR) ? 'userEdit' : 'user'}.png" />
                            <h3 id="modal-title">#{(usuarioGrupoController.operacao == consUtilController.operacaoNOVO) ? 'Novo Grupo de Usuário' : (usuarioGrupoController.operacao == consUtilController.operacaoALTERAR) ? 'Alterar Grupo de Usuário' : 'Grupo de Usuário'}</h3>
                        </h:panelGrid>
                    </p:outputPanel>
                </div>
                <div class="modal-body">
                    <p class="center" id="modal-content">
                        <div class="tabbable">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#tab1" data-toggle="tab">
                                        <span class="add-on"><i class="icon-user"></i></span>
                                        Dados
                                    </a>
                                </li>
                                <li><a href="#tab2" data-toggle="tab">
                                        <span class="add-on"><i class="icon-check"></i></span>
                                        Permissões
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab1">
                                    <p:outputPanel id="pnlUsuarioGrupoDados">
                                        <table cellpadding="5" cellspacing="5" style="width: 500px;">
                                            <tr>
                                                <td>
                                                    <h:outputLabel value="Nome:"
                                                                   style="font-weight: bold; text-align: right;"/>
                                                </td>

                                                <td colspan="3">
                                                    <p:outputPanel styleClass="input-prepend">
                                                        <span class="add-on"><i class="icon-font"></i></span>
                                                        <h:inputText id="txtUsuNome"
                                                                     value="#{usuarioGrupoController.usuarioGrupoSelecionado.ugrNome}"
                                                                     class="input-block-level"
                                                                     style="width: 100%;"/>
                                                    </p:outputPanel>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <h:outputLabel value="Bloqueado:"
                                                                   style="font-weight: bold; text-align: right;"/>
                                                </td>

                                                <td colspan="3">
                                                    <j:booleanButton id="bloqueado"
                                                                     value="#{usuarioGrupoController.usuarioGrupoSelecionado.ugrBloqueado}"
                                                                     update=":frmUsuarioGrupo:pnlUsuarioGrupoDados"/>
                                                </td>
                                            </tr>
                                        </table>
                                    </p:outputPanel>
                                </div>
                                <div class="tab-pane" id="tab2">
                                    <p:outputPanel id="pnlUsuarioGrupoPermissoes">
                                        <h:panelGrid columns="4">
                                            <h:outputLabel value="Categoria:"
                                                           style="font-weight: bold;"/>
                                            <h:selectOneMenu value="#{usuarioGrupoController.acaoGrupoSelecionado}"
                                                             converter="genericConverter">
                                                <f:ajax render=":frmUsuarioGrupo:dtbUsuarioGrupoPermissao"
                                                        listener="#{usuarioGrupoController.carregarAcoesPorGrupo()}"/>

                                                <f:selectItems value="#{usuarioGrupoController.acaoGrupos}"
                                                               var="acaoGrupo"
                                                               itemValue="#{acaoGrupo}"
                                                               itemLabel="#{acaoGrupo.agrNome}"/>
                                            </h:selectOneMenu>
                                        </h:panelGrid>

                                        <p:dataTable id="dtbUsuarioGrupoPermissao"
                                                     value="#{usuarioGrupoController.usuarioGrupoAcoesPorGrupo}"
                                                     filteredValue="#{usuarioGrupoController.usuarioGrupoAcoesPorGrupoFiltrados}"
                                                     var="usuarioGrupoAcao"
                                                     filterEvent="enter"
                                                     emptyMessage="Nenhuma permissão encontrada."
                                                     style="max-height: 250px; margin-top: 5px;">

                                            <p:column id="colAcao"
                                                      headerText="Ação"
                                                      style="text-align: right; width: 250px;">
                                                #{usuarioGrupoAcao.acao.acaoDescricao}
                                            </p:column>

                                            <p:column id="colPermissao"
                                                      headerText="Permissão"
                                                      style="text-align: left;">
                                                <j:booleanButton id="Permissao_#{usuarioGrupoAcao.usuarioGrupo.ugrCodigo}_#{usuarioGrupoAcao.acao.acaoCodigo}"
                                                                 update=":frmUsuarioGrupo:pnlUsuarioGrupoPermissoes"
                                                                 value="#{usuarioGrupoAcao.ugaPermissao}"/>
                                            </p:column>
                                        </p:dataTable>
                                    </p:outputPanel>
                                </div>
                            </div>
                        </div>
                    </p>
                </div>
                <div class="modal-footer">
                    <button id="btnSalvarUsuarioGrupo"
                            type="button"
                            class="btn btn-primary"
                            onclick="salvarUsuarioGrupo();">
                        <i class="icon-ok icon-white"></i>
                        Salvar
                    </button>

                    <button id="btnCancelarUsuarioGrupo"
                            type="button"
                            class="btn"
                            onclick="cancelarUsuarioGrupo();">
                        <i class="icon-remove"></i>
                        Cancelar
                    </button>
                </div>
            </div>

            <div id="modal-usuarioGrupo-excluir" class="modal hide fade">
                <div class="modal-header">
                    <h:panelGrid columns="2" cellpadding="5">
                        <p:graphicImage value="/resources/img/userRem.png" />
                        <h3 id="modal-title">Excluir Grupo de Usuário</h3>
                    </h:panelGrid>
                </div>
                <div class="modal-body">
                    <p class="center" id="modal-content">
                        <p:outputLabel id="lblUsuarioGrupoExcluir"
                                       value="Deseja realmente excluir o usuário #{usuarioGrupoController.usuarioGrupoSelecionado.ugrNome}?"/>
                    </p>
                </div>
                <div class="modal-footer">
                    <button id="btnConfirmarExclusao"
                            type="button"
                            class="btn btn-danger"
                            onclick="confirmarExclusaoUsuarioGrupo();">
                        <i class="icon-trash icon-white"></i>
                        Excluir
                    </button>

                    <button id="btnCancelarExclusao"
                            type="button"
                            class="btn"
                            onclick="cancelarExclusaoUsuarioGrupo();">
                        <i class="icon-remove"></i>
                        Não, espere!
                    </button>
                </div>
            </div>

            <div class="page-header">
                <h:panelGrid columns="2" cellpadding="5">
                    <p:graphicImage value="/resources/img/userGroup.png" />
                    <h1>Grupos de Usuários</h1>
                </h:panelGrid>

                <button id="btnNovoUsuarioGrupo"
                        type="button"
                        class="btn btn-primary"
                        onclick="novoUsuarioGrupo();">
                    <i class="icon-plus icon-white"></i>
                    Novo
                </button>
            </div>

            <p:dataTable id="dtbUsuarioGrupo"
                         value="#{usuarioGrupoController.usuarioGrupos}"
                         filteredValue="#{usuarioGrupoController.usuarioGruposFiltrados}"
                         rowKey="#{usuarioGrupo.ugrCodigo}"
                         filterEvent="enter"
                         var="usuarioGrupo"
                         emptyMessage="Nenhum grupo de usuário encontrado.">

                <p:column id="colNome"
                          headerText="Grupo"
                          filterBy="#{usuarioGrupo.ugrNome}"
                          filterMatchMode="contains"
                          sortBy="#{usuarioGrupo.ugrNome}"
                          style="text-align: center;">
                    #{usuarioGrupo.ugrNome}
                </p:column>

                <p:column id="colBloqueado"
                          headerText="Bloqueado"
                          filterBy="#{usuarioGrupo.ugrBloqueadoDesc}"
                          filterMatchMode="contains"
                          sortBy="#{usuarioGrupo.ugrBloqueadoDesc}"
                          style="text-align: center; width: 70px;">
                    #{usuarioGrupo.ugrBloqueadoDesc}
                </p:column>

                <p:column id="colAcoes"
                          style="text-align: center; width: 100px;">
                    <button id="btnAlterarUsuarioGrupo"
                            type="button"
                            class="btn"
                            onclick="alterarUsuarioGrupo([{name: 'ugrCodigo', value: #{usuarioGrupo.ugrCodigo}}]);"
                            style="margin-right: 2px;">
                        <i class="icon-pencil"></i>

                    </button>
                    <button id="btnExcluirUsuarioGrupo"
                            type="button"
                            class="btn btn-danger"
                            onclick="excluirUsuarioGrupo([{name: 'ugrCodigo', value: #{usuarioGrupo.ugrCodigo}}]);">
                        <i class="icon-trash icon-white"></i>

                    </button>
                </p:column>
            </p:dataTable>
        </h:form>
    </ui:define>
</ui:composition>